import React, {FC, useEffect, useState} from "react";
import styles from './common.module.scss'
import QuestionCard from "../../components/QuestionCard";
import {useDebounceFn, useRequest, useTitle} from "ahooks";
import {Empty, Spin, Typography} from "antd";
import ListSearch from "../../components/ListSearch";
import {getQuestionListService} from "../../services/question";
import {useSearchParams} from "react-router-dom";
import {LIST_SEARCH_PARAM_KEY} from "../../constant";

const {Title} = Typography

// const rawQuestionList = [
//     {_id: 1, title: '问卷1', isPublished: false, isStar: false, answerCount: 5, createAt: '3月10日 12:30'},
//     {_id: 2, title: '问卷2', isPublished: false, isStar: false, answerCount: 10, createAt: '3月11日 12:30'},
//     {_id: 3, title: '问卷3', isPublished: true, isStar: true, answerCount: 6, createAt: '3月14日 13:30'}
// ]


const List: FC = () => {
    useTitle('问卷列表')

    const [started, setStarted] = useState(false)

    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
    const [total, setTotal] = useState(0)
    const haveMoreData = total > list.length

    const containerRef = React.useRef<HTMLDivElement>(null)
    const [searchParams] = useSearchParams()

    const {run: load, loading} = useRequest(async () => {
        const data = await getQuestionListService({
            page,
            pageSize: 10,
            keyword: searchParams.get(LIST_SEARCH_PARAM_KEY) || '',
        })
        return data
    }, {
        manual: true,
        onSuccess(data) {
            const {list: l = [], total = 0} = data
            setList(list.concat(l))
            setTotal(total)
            setPage(page + 1)
        },
    })


    useEffect(() => {
        tryLoadMore()
    }, [searchParams])

    const {run: tryLoadMore} = useDebounceFn(() => {
        const elem = containerRef.current
        if (elem == null) {
            return
        }
        const domRect = elem.getBoundingClientRect();
        if (domRect == null) return
        const {bottom} = domRect
        if (bottom < document.body.clientHeight) {
            load()
            setStarted(true)
        }
    }, {wait: 1000})

    useEffect(() => {
        if (haveMoreData) {
            window.addEventListener('scroll', tryLoadMore)
        }
        return () => {
            window.removeEventListener('scroll', tryLoadMore)
        }
    }, [searchParams, haveMoreData])

    // const [questionList, setQuestionList] = useState(rawQuestionList)

    // const [list, setList] = useState([])
    // const [total, setTotal] = useState(0)
    //
    //
    // useEffect(() => {
    //     async function load() {
    //         const data = await getQuestionListService()
    //         const {list = [], total = 0} = data
    //         setTotal(total)
    //         setList(list)
    //     }
    //
    //     load()
    // }, [])


    // const {data = {}, loading} = useRequest(getQuestionListService)
    // const {data = {}, loading} = UseLoadQuestionListData();
    // const {list = [], total = 0} = data

    const LoadMoreContentElem = () => {
        if (!started || loading) {
            return <Spin></Spin>
        }
        if (list.length === 0) {
            return <Empty/>
        }
        if (!haveMoreData) {
            return <span>没有更多了</span>
        }
        return <div>开始加载下一页</div>
    }


    return (
        <>
            <div className={styles.header}>
                <div className={styles.left}>
                    <Title level={3}>我的问卷</Title>
                </div>
                <div className={styles.right}>
                    <ListSearch></ListSearch>
                </div>
            </div>
            <div className={styles.content}>

                {list.length > 0 && list.map((q: any) => {
                    const {_id} = q
                    return <QuestionCard key={_id} {...q}/>
                })
                }
            </div>
            <div className={styles.footer}>
                <div ref={containerRef}>
                    {LoadMoreContentElem()}
                </div>
            </div>
        </>
    )
}
export default List;